<template>
  <div class="rankinglist">
    <van-row
      style="font-size: 20px; padding: 20px 10px"
      @click="handleGoDetails"
    >
      <van-col span="8" style="text-align: left"
        ><van-icon name="arrow-left"
      /></van-col>
      <van-col span="8" style="text-align: center">排行榜</van-col>
      <van-col span="8" style="text-align: right"
        ><van-icon name="share-o"
      /></van-col>
    </van-row>

    <!-- 官方榜单 -->
    <div class="Song">
      <span class="iconfont icon-wangyiyunyinle"></span><i>官方榜</i>
    </div>

    <!-- 飙升榜 -->
    <div class="biaosheng" @click="goSongDetails(initSong.id)">
      <p>{{ qw }}</p>
      <div class="center">
        <div class="leftImg">
          <p>{{ initSong.name }}</p>
          <img :src="this.initSong.coverImgUrl" alt="" />
          <van-icon name="play" class="icon" />
        </div>

        <div class="list">
          <ol>
            <li v-if="ListSongs[0]">
              <b
                >1. {{ ListSongs[0].al.name
                }}<i> - {{ ListSongs[0].ar[0].name }}</i></b
              ><span>🔥</span>
            </li>
            <li v-if="ListSongs[1]">
              <b
                >2. {{ ListSongs[1].al.name
                }}<i> - {{ ListSongs[1].ar[0].name }}</i></b
              ><span>🔥</span>
            </li>
            <li v-if="ListSongs[2]">
              <b
                >3. {{ ListSongs[2].al.name
                }}<i> - {{ ListSongs[2].ar[0].name }}</i></b
              ><span>🔥</span>
            </li>
          </ol>
        </div>
      </div>
    </div>

    <!-- 新歌榜 -->
    <div class="biaosheng" @click="goSongDetails(initSongNew.id)">
      <p>{{ qe }}</p>
      <div class="center">
        <div class="leftImg">
          <p>{{ initSongNew.name }}</p>
          <img :src="this.initSongNew.coverImgUrl" alt="" />
          <van-icon name="play" class="icon" />
        </div>

        <div class="list">
          <ol>
            <li v-if="ListSongsNew[0]">
              <b
                >1. {{ ListSongsNew[0].al.name
                }}<i> - {{ ListSongsNew[0].ar[0].name }}</i></b
              ><span>🦄</span>
            </li>
            <li v-if="ListSongsNew[1]">
              <b
                >2. {{ ListSongsNew[1].al.name
                }}<i> - {{ ListSongsNew[1].ar[0].name }}</i></b
              ><span>🐇</span>
            </li>
            <li v-if="ListSongsNew[2]">
              <b
                >3. {{ ListSongsNew[2].al.name
                }}<i> - {{ ListSongsNew[2].ar[0].name }}</i></b
              ><span>🐖</span>
            </li>
          </ol>
        </div>
      </div>
    </div>

    <!-- 原创榜 -->
    <div class="biaosheng" @click="goSongDetails(yuanchuang.id)">
      <p>{{ qr }}</p>
      <div class="center">
        <div class="leftImg">
          <p>{{ yuanchuang.name }}</p>
          <img :src="this.yuanchuang.coverImgUrl" alt="" />
          <van-icon name="play" class="icon" />
        </div>

        <div class="list">
          <ol>
            <li v-if="yuanchuangs[0]">
              <b
                >1. {{ yuanchuangs[0].al.name
                }}<i> - {{ yuanchuangs[0].ar[0].name }}</i></b
              ><span>↑</span>
            </li>
            <li v-if="yuanchuangs[1]">
              <b
                >2. {{ yuanchuangs[1].al.name
                }}<i> - {{ yuanchuangs[1].ar[0].name }}</i></b
              ><span>↑</span>
            </li>
            <li v-if="yuanchuangs[2]">
              <b
                >3. {{ yuanchuangs[2].al.name
                }}<i> - {{ yuanchuangs[2].ar[0].name }}</i></b
              ><span>↓</span>
            </li>
          </ol>
        </div>
      </div>
    </div>

    <!-- 热歌榜 -->
    <div class="biaosheng" @click="goSongDetails(hotSongs1.id)">
      <p>{{ qt }}</p>
      <div class="center">
        <div class="leftImg">
          <p>{{ hotSongs1.name }}</p>
          <img :src="this.hotSongs1.coverImgUrl" alt="" />
          <van-icon name="play" class="icon" />
        </div>

        <div class="list">
          <ol>
            <li v-if="hotSongs2[0]">
              <b
                >1. {{ hotSongs2[0].al.name
                }}<i> - {{ hotSongs2[0].ar[0].name }}</i></b
              ><span>😁</span>
            </li>
            <li v-if="hotSongs2[1]">
              <b
                >2. {{ hotSongs2[1].al.name
                }}<i> - {{ hotSongs2[1].ar[0].name }}</i></b
              ><span>😚</span>
            </li>
            <li v-if="hotSongs2[2]">
              <b
                >3. {{ hotSongs2[2].al.name
                }}<i> - {{ hotSongs2[2].ar[0].name }}</i></b
              ><span>🥳</span>
            </li>
          </ol>
        </div>
      </div>
    </div>

    <!-- VIP榜 -->
    <div class="biaosheng" @click="goSongDetails(VipSongs1.id)">
      <p>{{ qy }}</p>
      <div class="center">
        <div class="leftImg">
          <p>VIP榜</p>
          <img :src="this.VipSongs1.coverImgUrl" alt="" />
          <van-icon name="play" class="icon" />
        </div>

        <div class="list">
          <ol>
            <li v-if="VipSongs2[0]">
              <b
                >1. {{ VipSongs2[0].al.name
                }}<i> - {{ VipSongs2[0].ar[0].name }}</i></b
              ><span>💘</span>
            </li>
            <li v-if="VipSongs2[1]">
              <b
                >2. {{ VipSongs2[1].al.name
                }}<i> - {{ VipSongs2[1].ar[0].name }}</i></b
              ><span>❤️‍🔥</span>
            </li>
            <li v-if="VipSongs2[2]">
              <b
                >3. {{ VipSongs2[2].al.name
                }}<i> - {{ VipSongs2[2].ar[0].name }}</i></b
              ><span>💞</span>
            </li>
          </ol>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import "../../assets/wangyiyun/iconfont.css";
import axios from "axios";
import { Col, Row } from "vant";
import { Icon } from "vant";
import { Tab, Tabs } from "vant";
export default {
  data() {
    return {
      initSong: [],
      ListSongs: [], //具体歌曲信息
      initSongNew: [],
      ListSongsNew: [],
      yuanchuang: [],
      yuanchuangs: [],
      hotSongs1: [],
      hotSongs2: [],
      VipSongs1: [],
      VipSongs2: [],
      qw: "",
      qe: "",
      qr: "",
      qt: "",
      qy: "",
    };
  },
  computed: {
    param() {
      return `cookie=${localStorage.getItem(
        "cookie"
      )}&timestamp=${new Date().getTime()}`;
    },
  },
  watch: {},

  methods: {
    //点击进入飙升榜详情
    goSongDetails(id) {
      this.$router.push("/songlistdetails/" + id);
    },
    //返回
    handleGoDetails() {
      this.$router.go(-1);
    },
    //所有榜单接口-----飙升榜
    async initList() {
      const res = await axios.get(
        "http://192.168.31.27:3000/toplist?" + this.param
      );
      // console.log("榜单接口", res);
      this.qw = res.data.list[0].updateFrequency;
      const id = res.data.list[0].id;
      // console.log(id);
      //获取飙升榜详情
      const result = await axios.get(
        "http://192.168.31.27:3000/playlist/detail?" + this.param,
        {
          params: {
            id,
          },
        }
      );
      // console.log(result);
      this.initSong = result.data.playlist;
      // console.log(this.initSong);
      this.ListSongs = result.data.playlist.tracks;
    },

    //所有榜单接口 ------- 新歌榜
    async initListNew() {
      const res = await axios.get(
        "http://192.168.31.27:3000/toplist?" + this.param
      );
      // console.log("榜单接口", res);
      this.qe = res.data.list[1].updateFrequency;

      const id = res.data.list[1].id;
      // console.log(id);
      //获取新歌榜详情
      const result = await axios.get(
        "http://192.168.31.27:3000/playlist/detail?" + this.param,
        {
          params: {
            id,
          },
        }
      );
      // console.log(result);
      this.initSongNew = result.data.playlist;
      // console.log(this.initSong);
      this.ListSongsNew = result.data.playlist.tracks;
    },

    //所有榜单接口 ------- 原创榜
    async yuanchuangss() {
      const res = await axios.get(
        "http://192.168.31.27:3000/toplist?" + this.param
      );
      // console.log("榜单接口", res);
      this.qr = res.data.list[2].updateFrequency;

      const id = res.data.list[2].id;
      // console.log(id);
      //获取新歌榜详情
      const result = await axios.get(
        "http://192.168.31.27:3000/playlist/detail?" + this.param,
        {
          params: {
            id,
          },
        }
      );
      // console.log(result);
      this.yuanchuang = result.data.playlist;
      // console.log(this.initSong);
      this.yuanchuangs = result.data.playlist.tracks;
    },
    //所有榜单接口 ------- 热歌榜
    async hotSongs() {
      const res = await axios.get(
        "http://192.168.31.27:3000/toplist?" + this.param
      );
      // console.log("榜单接口", res);
      this.qt = res.data.list[3].updateFrequency;

      const id = res.data.list[3].id;
      // console.log(id);
      //获取新歌榜详情
      const result = await axios.get(
        "http://192.168.31.27:3000/playlist/detail?" + this.param,
        {
          params: {
            id,
          },
        }
      );
      // console.log(result);
      this.hotSongs1 = result.data.playlist;
      // console.log(this.initSong);
      this.hotSongs2 = result.data.playlist.tracks;
    },

    //所有榜单接口 ------- vip榜
    async VipSongs() {
      const res = await axios.get(
        "http://192.168.31.27:3000/toplist?" + this.param
      );
      // console.log("榜单接口", res);
      this.qy = res.data.list[4].updateFrequency;

      const id = res.data.list[4].id;
      // console.log(id);
      //获取新歌榜详情
      const result = await axios.get(
        "http://192.168.31.27:3000/playlist/detail?" + this.param,
        {
          params: {
            id,
          },
        }
      );
      // console.log(result);
      this.VipSongs1 = result.data.playlist;
      // console.log(this.initSong);
      this.VipSongs2 = result.data.playlist.tracks;
    },
  },
  created() {
    this.initList();
    this.initListNew();
    this.yuanchuangss();
    this.hotSongs();
    this.VipSongs();
  },
  mounted() {},
  components: {},
};
</script>
<style scoped>
/* 官方榜 */
.rankinglist {
  background: #f8f8f8;
  /* height: 230px; */
  margin-bottom: 100px;
}
.Song {
  height: 30px;
}
.Song span {
  color: rgb(192, 51, 51);
  font-size: 21px;
  padding: 10px 8px 0 15px;
}
.Song i {
  font-size: 21px;
  font-weight: 600;
}
/* 飙升榜 */
.biaosheng {
  margin: 0 auto;
  width: 93%;
  background: #fff;
  border-radius: 15px;
  margin-bottom: 20px;
}
.biaosheng p {
  padding: 8px 10px 0;
  text-align: right;
}
.center {
  display: flex;
}

.list {
  flex: 1;
  padding: 0 0px 15px 40px;
}
.list li {
  line-height: 30px;
  height: 30px;
}
.list li b {
  max-width: 170px;
  float: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.list li span {
  float: right;
  margin-right: 20px;
}
.leftImg {
  padding-left: 20px;
  position: relative;
}
.leftImg p {
  font-size: 20px;
  font-weight: bold;
  padding: 0 0 8px;
}
.center .leftImg img {
  width: 60px;
  border-radius: 10px;
}
.icon {
  position: absolute;
  top: 45px;
  left: 38px;
  color: #e7e7e7;
  opacity: 0.8;
  font-size: 25px;
}
</style>
